html css
2019-03-05
2019-03-05
前言：本篇文章的后续会可能会长期更新，以记录一些基础的HTML、CSS的内容。
一、a标签
<a href="">链接名</a>- 1、四种状态（先后顺序）：
- ① a:link 未被点击时的默认效果。
- ② a:hover 鼠标移到链接上时。
- ③ a:active 当链接被点击的时候。
- ④ a:visited 已点击后。
- 2、常见设置：
- ① 去掉下划线和设置下划线：
text-decoration:none、text-decoration:underline - ② 默认在当前页打开。即：
target="_self"，新页面打开：target="_blank" - ③
<a href="www.xxx.com">链接名</a>如此是不能够跳转，href要像href="https://www.xxx.com" - 3、点击链接进行下载(此处下载有两个说明)：
- ①
<a href="xx.zip">下载</a> - 如果是这种写法，因为浏览器目前不能读取.zip的内容，所以就会直接下载，若你改为下一个
a.txt的话浏览器就会直接读取你a.txt里面的内容。 - ②
<a href="note.txt" target="_blank" download="保存的默认文件名">下载</a> - 推荐使用这种写法。“href”是要下载文件的路径，“download”就是点击“下载”之后浏览器会弹出一个框，框里的文件名默认就是这个“download”里面的。
- 4、书签、锚
- 通过id、name在页面间进行直接跳转。
- ① 当前页面跳转：
- id方法:
- 点击处：
<a href="#id">点击跳转</a> - 到达处：
<p id="id">到达这里</p>在标签中设一个相同的id - name方法：
- 点击处：
<a href="#id">点击跳转</a>（与id的一样） - 到达处：
<a href="" name="id">到达这里</a>a标签，而且id前没有”#” - ② 新打开页面进行跳转：
- id方法：
- 当前页：
<a href="https://www.xx.com/home.html#id">点击跳转</a> - 新页面：
<p id="id">到达这里</p>在标签中设一个相同的id - name方法：
- 当前页：
<a href="https://www.xx.com/home.html#id">点击跳转</a>（与id的一样） - 新页面：
<a href="" name="id">到达这里</a>a标签，而且id前没有”#”，如果有”#”则可以抵达新页面但无法定位到对应位置。 - 由此可见a标签作为书签、锚跳转有些繁琐且不易维护，推荐使用jQuery的animate()方法
二、单选框
<input type="radio">- 常见用来作单项的选择，如选择性别。
示例：选择性别
1
2
3<input type="radio" name="sex" id="boy"><label for="boy">男</label>
<input type="radio" name="sex" id="girl"><label for="girl">女</label>
<input type="radio" name="sex" id="secret"><label for="secret">保密</label>单选框与label的配套使用。这组标签的name必须要有相同的值，id要与label的for属性值一致。而且这样的好处还有当鼠标移到label是呈指针状，点击label也是能够选中。
多选框也可以采用此方法进行选中，但是不存在单选的问题。
三、select
1
2
3
4<select>
<option>下拉项1</option>
<option>下拉项2</option>
</select>下拉项要多选时给select添加一个属性：
multiple，这个就像选择文件时一样，也添加该属性就行多选。四、文本超出显示省略号
给装文本的框添加以下样式：
1
2
3overflow:hiiden; /*超出隐藏*/
text-overflow:ellipsis; /*文本超出时显示省略号*/
white-space:nowrap; /*不换行*/若把
text-overflow:ellipsis;去掉，则是超出隐藏且不换行。五、设置页面title旁边的小图标
<link rel="icon" href="img/favicon.ico" type="image/x-icon">- 只需要修改href的路径即可，不一定是.ico格式，.jpg、.png、.gif等都行。
六、span之间的间隔
以下span写法会出现间隙：
1
2<span>123</span>
<span>456</span>在页面显示没有影响，但在手机端就会有些问题，改为以下写法即可：
<span>123</span><span>456</span>七、background-* 相关
- 与background有关。
background: rgba(0,255,0,0.85) url(xx.png) no-repeat 50% top;，背景色、背景图片、是否重复、左右位置、上下位置（后面的位置都可以为百分比）。背景色与背景图片不会冲突。 - 1、背景渐变：
background: linear-gradient(direction, color1,color2……); - direction：用角度值指定渐变的方向（或角度）。left或90deg：从左到右，top或180deg：从上到下，top left或135deg：左上到右下……
- color：依次渐变的颜色。
- 涉及兼容性：-ms-、-webkit-、-moz-
- IE7不支持渐变，可以用滤镜：-ms-filter
- IE6既不支持渐变也不支持滤镜，直接给一个背景色：
+background:#00ff00; - 2、背景定位：
- 常见用在精灵图标。
background-position:-100px -100px; - 坐标值（PS取值）：X轴 Y轴
- 3、背景大小：
background-size:100%，X轴缩放 Y轴auto，超出部分隐藏background-size:100% 100%;,X轴缩放 Y轴缩放background-size:cover;，把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉八、transition 过渡
transition:all 2s;- 具体内容
九、transform 变化
- 常见值：
translate(x,y):2D转换，就是改变一个框在页面的位置，若只有一个值默认是x；- translate3d(x,y,z):3D转换，translateX(x)只用于x轴，其它同理；
scale(x,y):2D缩放，只有一个值时默认x和y；- scale3d(x,y,z) 同理，如scaleX(1.2)；
rotate(angle):沿着X轴的3D旋转，angle：角度；- rotate3d(x,y,z,angle) 同理，如rotateX(360deg)；
skew(x-angle,y-angle):沿着X和Y轴的2D倾斜;- skewX(angle)、skewY(angle) 同理；
- 具体内容
十、transition和transform制作动态效果
1
2
3
4
5
6
7
8
9
10
11
12
13<style>
div{
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
transition:all 1.5s;
}
div:hover{
transform:rotateZ(720deg) scale(0.5);
}
</style>
<div></div>
十一、animation 动画 
animation:mymove 5s infinite;：绑定到选择器的keyframe名称、动画耗时、次数（默认一次，此处是无限）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/{
from {left:0px;}
to {left:200px;}
}
</style>
<div></div>